<template>
  <div>
    <headers :head_title="head_title" />
    <div class="upload-container">
      <div class="card-upload-container">
        <div class="upload-button-wrapper" @click.stop="handleClickOutside">
          <button v-if="!uploadedImage" @click="triggerFileInput" class="upload-button">
            <el-icon size="50px"><Camera /></el-icon>
            <!-- 这里可以添加相机图标 -->
          </button>
          <img
            style="width: 100%; height: 100%;"
            v-else
            class="uploaded-image"
            :src="imageSrc"
            @click="triggerFileInputAndReset"
            alt="Uploaded Image"
          />
          <span class="size_title">点击拍摄/上传银行卡正面</span>
          <input type="file" ref="fileInput" @change="onFileChange" class="hidden-file-input" accept="image/*" />
        </div>
        <div class="unionpay-logo">

        </div>
      </div>
      <van-button @click="nextstep" class="next" type="primary">下一步</van-button>
    </div>
  </div>
</template>

<script >

import router from "@/router";
import headers from "../../components/header.vue";
export default {
  components: {
    headers,
  },
  setup() {
    const head_title = "绑定银行卡";
    return {
      head_title,
    };
  },

    data() {
        return {
            uploadedImage: false, // 控制是否已上传图片
            imageSrc: '', // 存储上传的图片URL
            fileInput: null, // 引用文件输入元素
        };
    },

    mounted() {
        this.fileInput = document.createElement('input');
        this.fileInput.type = 'file';
        this.fileInput.accept = 'image/*';
        this.fileInput.style.display = 'none';
        document.body.appendChild(this.fileInput);

        this.fileInput.addEventListener('change', this.onFileChange);
    },

    beforeUnmount() {
        this.fileInput.removeEventListener('change', this.onFileChange);
        document.body.removeChild(this.fileInput);
    },

    methods: {
        onClickLeft() { history.back() },
        triggerFileInput() {
            this.fileInput.click();
        },
        nextstep() {
            router.push('/recognize_bank');
            localStorage.setItem('bank_image', this.imageSrc);
        },
        triggerFileInputAndReset() {
            // 重置状态以允许重新上传
            this.uploadedImage = false;
            this.imageSrc = '';
            // 触发文件输入
            this.triggerFileInput();
        },


        onFileChange(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.imageSrc = e.target.result;
                    this.uploadedImage = true;
                };
                reader.readAsDataURL(file);
            }
        },
        handleClickOutside(event) {
            // 阻止在容器外部点击时触发不必要的操作（可选）
            // 如果需要点击容器外部也能触发某些操作，可以移除这个方法
        },
    },

};
</script>

<style scoped lang="scss">
.card-upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  /* border: 1px solid #ccc; */
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  margin-top: 50px;
  /* 设置背景图片 */
  background-image: url('../../image/银行卡上传1.png');
  background-repeat: no-repeat;
  /* background-repeat: repeat-x;
  background-repeat: repeat-y; */
  background-size: 100% 100%;
}

.upload-button-wrapper {
  margin-bottom: 10px;
}

.upload-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 150px;
  height: 30px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 8px;
  padding: 5px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.camera-icon {
  width: 150px;
  height: 150px;
  margin-bottom: 2.5px;
}

.unionpay-logo img {
  position: absolute;
  right: 15px;
  bottom: -40px;
  width: 50px;
  height: auto;
}

.size_title {
  font-size: 15px;
  padding-top: 10px;
  color: #007bff;
}

.hidden-file-input {
  position: absolute;
  width: 0.5px;
  height: 0.5px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-container {
  position: relative;
  width: 300px;
  /* 设置你需要的宽度 */
  height: 175px;
  /* 设置你需要的高度，与按钮和图片的尺寸相匹配 */
  cursor: pointer;
  /* 当没有图片时，整个容器都可点击 */
  /* background-color: pink; */
  margin: 0 auto;
}

.upload-button {
  margin-left: 35%;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 25px;
  background-color: rgb(1, 131, 252);
  color: white;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* margin-bottom: 20px; */
  /* 确保按钮可点击 */
}

.uploaded-image {
  /* width: 100%;
  height: 100%; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  cursor: pointer;
  /* 确保图片可点击以重新上传 */
}

.next {
  margin-top: 115px;
  width: 100%;
}
</style>
